import { useState } from 'react'

export default function ComplexHookState() {
  const [friends, setFriends] = useState(['tom', 'alen', 'haha'])
  const [students, setStudents] = useState([
    { id: 110, name: 'why', age: 19 },
    { id: 111, name: 'code', age: 20 },
    { id: 112, name: 'who', age: 11 }
  ])
  function incrementAge(index) {
    const newStudents = [...students]
    newStudents[index].age += 1
    setStudents(newStudents)
  }
  return (
    <div>
      <h2>好友列表</h2>
      {friends.map((item, index) => {
        return <li key={item}>{item}</li>
      })}
      <button onClick={(e) => setFriends([...friends, 'tt'])}>添加朋友</button>

      <h2>学生列表</h2>
      {students.map((item, index) => {
        return (
          <li key={item.id}>
            <span>姓名:{item.name}</span>
            <span>年龄:{item.age}</span>
            <button onClick={(e) => incrementAge(index)}>年龄+1</button>
          </li>
        )
      })}
    </div>
  )
}
